<!DOCTYPE html>
<html>
  <head>
    <title>我的博客图床</title>
    <meta charset="utf-8"></head>
    <style>
      *,
      div,
      p {
        border: 0;
        margin: 0;
        padding: 0;
      }
      .Container {
        width: 90vw;
        margin: 10px auto 0 auto;
        box-shadow: 5px;
      }
      .image-view {
        border: 3px dashed rgb(187, 185, 185);
      }
      .image {
        height: 230px;
        width: 406px;
        position: relative;
        margin: 10px;
        float: left;
      }
      .image-view img {
        height: 200px;
        width: 400px;
        overflow: hidden;
      }
      .image-title {
        width: 100%;
        text-align: center;
        font-size: 1rem;
        color: rgb(59, 142, 145);
      }
      .copy-btn {
        position: absolute;
        right: 3px;
        top: 3px;
        display: block;
        background: gray;
        font-size: 0.8rem;
        padding: 3px;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        box-shadow: 3px 3px 2px rgb(172, 172, 172);
      }
      .copy-btn:hover {
        background: rgb(53, 52, 52);
      }
      .copy-btn-1{
        right: 3px;
        top: 3px;
        background: darkorange;
      }
      .copy-btn-1:hover{
          background: #FF5A00;
      } 
      .copy-btn-2{
        right: 3px;
        top: 36px;
        background: brown;
      }
      .copy-btn-2:hover{
          background: #ED1A1A;
      } 
      .copy-btn-3{
        right: 3px;
        top: 69px;
      }
      .choose{
        position: absolute;
        right: 30px;
        top: 30px;
        display: block;
        font-size: 0.8rem;
      }
    </style>
  </head>
  <body>
  <div class="choose">
          显示：<select id="show">
            <option value ="day">一天</option>
            <option value ="week">一周</option>
            <option value="month">一月</option>
            <option value="year">一年</option>
          </select>
      </div>
    <div class="Container">
        <div id="day image"></div>
        <div id="week image"></div>
        <div id="month image"></div>
        <div id="year image"></div>
    <script>const datas = {"day":[{"src":"images/屏幕截图 2022-01-05 103301.png","title":"屏幕截图 2022-01-05 103301"},{"src":"images/屏幕截图 2022-01-05 104908.png","title":"屏幕截图 2022-01-05 104908"},{"src":"images/屏幕截图 2022-01-05 112531.png","title":"屏幕截图 2022-01-05 112531"}],"week":[{"src":"images/fajlfjal.png","title":"fajlfjal"},{"src":"images/towaymerge_extend_1.png","title":"towaymerge_extend_1"},{"src":"images/你好中国.png","title":"你好中国"},{"src":"images/屏幕截图 2022-01-04 101629.png","title":"屏幕截图 2022-01-04 101629"},{"src":"images/屏幕截图 2022-01-04 103042.png","title":"屏幕截图 2022-01-04 103042"},{"src":"images/屏幕截图 2022-01-04 104642.png","title":"屏幕截图 2022-01-04 104642"},{"src":"images/屏幕截图 2022-01-04 104836.png","title":"屏幕截图 2022-01-04 104836"},{"src":"images/屏幕截图 2022-01-04 112202.png","title":"屏幕截图 2022-01-04 112202"},{"src":"images/屏幕截图 2022-01-04 154000.png","title":"屏幕截图 2022-01-04 154000"},{"src":"images/屏幕截图 2022-01-05 103301.png","title":"屏幕截图 2022-01-05 103301"},{"src":"images/屏幕截图 2022-01-05 104908.png","title":"屏幕截图 2022-01-05 104908"},{"src":"images/屏幕截图 2022-01-05 112531.png","title":"屏幕截图 2022-01-05 112531"}],"month":[{"src":"images/fajlfjal.png","title":"fajlfjal"},{"src":"images/fajlfjal.png","title":"fajlfjal"},{"src":"images/towaymerge_extend_1.png","title":"towaymerge_extend_1"},{"src":"images/towaymerge_extend_1.png","title":"towaymerge_extend_1"},{"src":"images/你好中国.png","title":"你好中国"},{"src":"images/你好中国.png","title":"你好中国"},{"src":"images/屏幕截图 2022-01-04 101629.png","title":"屏幕截图 2022-01-04 101629"},{"src":"images/屏幕截图 2022-01-04 101629.png","title":"屏幕截图 2022-01-04 101629"},{"src":"images/屏幕截图 2022-01-04 103042.png","title":"屏幕截图 2022-01-04 103042"},{"src":"images/屏幕截图 2022-01-04 103042.png","title":"屏幕截图 2022-01-04 103042"},{"src":"images/屏幕截图 2022-01-04 104642.png","title":"屏幕截图 2022-01-04 104642"},{"src":"images/屏幕截图 2022-01-04 104642.png","title":"屏幕截图 2022-01-04 104642"},{"src":"images/屏幕截图 2022-01-04 104836.png","title":"屏幕截图 2022-01-04 104836"},{"src":"images/屏幕截图 2022-01-04 104836.png","title":"屏幕截图 2022-01-04 104836"},{"src":"images/屏幕截图 2022-01-04 112202.png","title":"屏幕截图 2022-01-04 112202"},{"src":"images/屏幕截图 2022-01-04 112202.png","title":"屏幕截图 2022-01-04 112202"},{"src":"images/屏幕截图 2022-01-04 154000.png","title":"屏幕截图 2022-01-04 154000"},{"src":"images/屏幕截图 2022-01-04 154000.png","title":"屏幕截图 2022-01-04 154000"},{"src":"images/屏幕截图 2022-01-05 103301.png","title":"屏幕截图 2022-01-05 103301"},{"src":"images/屏幕截图 2022-01-05 103301.png","title":"屏幕截图 2022-01-05 103301"},{"src":"images/屏幕截图 2022-01-05 104908.png","title":"屏幕截图 2022-01-05 104908"},{"src":"images/屏幕截图 2022-01-05 104908.png","title":"屏幕截图 2022-01-05 104908"},{"src":"images/屏幕截图 2022-01-05 112531.png","title":"屏幕截图 2022-01-05 112531"},{"src":"images/屏幕截图 2022-01-05 112531.png","title":"屏幕截图 2022-01-05 112531"}],"year":[{"src":"images/fajlfjal.png","title":"fajlfjal"},{"src":"images/fajlfjal.png","title":"fajlfjal"},{"src":"images/fajlfjal.png","title":"fajlfjal"},{"src":"images/towaymerge_extend_1.png","title":"towaymerge_extend_1"},{"src":"images/towaymerge_extend_1.png","title":"towaymerge_extend_1"},{"src":"images/towaymerge_extend_1.png","title":"towaymerge_extend_1"},{"src":"images/你好中国.png","title":"你好中国"},{"src":"images/你好中国.png","title":"你好中国"},{"src":"images/你好中国.png","title":"你好中国"},{"src":"images/屏幕截图 2022-01-04 101629.png","title":"屏幕截图 2022-01-04 101629"},{"src":"images/屏幕截图 2022-01-04 101629.png","title":"屏幕截图 2022-01-04 101629"},{"src":"images/屏幕截图 2022-01-04 101629.png","title":"屏幕截图 2022-01-04 101629"},{"src":"images/屏幕截图 2022-01-04 103042.png","title":"屏幕截图 2022-01-04 103042"},{"src":"images/屏幕截图 2022-01-04 103042.png","title":"屏幕截图 2022-01-04 103042"},{"src":"images/屏幕截图 2022-01-04 103042.png","title":"屏幕截图 2022-01-04 103042"},{"src":"images/屏幕截图 2022-01-04 104642.png","title":"屏幕截图 2022-01-04 104642"},{"src":"images/屏幕截图 2022-01-04 104642.png","title":"屏幕截图 2022-01-04 104642"},{"src":"images/屏幕截图 2022-01-04 104642.png","title":"屏幕截图 2022-01-04 104642"},{"src":"images/屏幕截图 2022-01-04 104836.png","title":"屏幕截图 2022-01-04 104836"},{"src":"images/屏幕截图 2022-01-04 104836.png","title":"屏幕截图 2022-01-04 104836"},{"src":"images/屏幕截图 2022-01-04 104836.png","title":"屏幕截图 2022-01-04 104836"},{"src":"images/屏幕截图 2022-01-04 112202.png","title":"屏幕截图 2022-01-04 112202"},{"src":"images/屏幕截图 2022-01-04 112202.png","title":"屏幕截图 2022-01-04 112202"},{"src":"images/屏幕截图 2022-01-04 112202.png","title":"屏幕截图 2022-01-04 112202"},{"src":"images/屏幕截图 2022-01-04 154000.png","title":"屏幕截图 2022-01-04 154000"},{"src":"images/屏幕截图 2022-01-04 154000.png","title":"屏幕截图 2022-01-04 154000"},{"src":"images/屏幕截图 2022-01-04 154000.png","title":"屏幕截图 2022-01-04 154000"},{"src":"images/屏幕截图 2022-01-05 103301.png","title":"屏幕截图 2022-01-05 103301"},{"src":"images/屏幕截图 2022-01-05 103301.png","title":"屏幕截图 2022-01-05 103301"},{"src":"images/屏幕截图 2022-01-05 103301.png","title":"屏幕截图 2022-01-05 103301"},{"src":"images/屏幕截图 2022-01-05 104908.png","title":"屏幕截图 2022-01-05 104908"},{"src":"images/屏幕截图 2022-01-05 104908.png","title":"屏幕截图 2022-01-05 104908"},{"src":"images/屏幕截图 2022-01-05 104908.png","title":"屏幕截图 2022-01-05 104908"},{"src":"images/屏幕截图 2022-01-05 112531.png","title":"屏幕截图 2022-01-05 112531"},{"src":"images/屏幕截图 2022-01-05 112531.png","title":"屏幕截图 2022-01-05 112531"},{"src":"images/屏幕截图 2022-01-05 112531.png","title":"屏幕截图 2022-01-05 112531"}]}
var totalElements = {
            day: document.getElementById('day'),
            week: document.getElementById('week'),
            month: document.getElementById('month'),
            year: document.getElementById('year'),
        }
        var totalHTML = {
            day: undefined,
            week: undefined,
            month: undefined,
            year: undefined
        }
      window.onload = function () {

        // 动态渲染HTML页面
        Object.keys(datas).forEach(key => {
            if(totalHTML[key] == undefined || totalHTML[key] == null || totalHTML[key].length == 0){
                totalHTML[key] = "";
            datas.day.map(item => {
                totalHTML[key] += '<div class="image"><div class="image-view"><img src="' +  item.src +
                '" /></div><p class="image-title">' + item.title +
                '</p><span class="copy-btn copy-btn-1">open</span><span class="copy-btn copy-btn-2">copy link</span>' +
                '<span class="copy-btn copy-btn-3">copy html</span></div>'
            })
            totalElements[key].innerHTML = totalHTML[key];
        }
        });

        // 响应用户事件
        const baseURL = window.location.hostname
        var selected = document.getElementById('show')
        var links = window.location.href.split("?");
        if(links.length != 1){
            var val = links[1].split("=")[1];
            selected.value = val;
        }
        selected.onclick = function(e){
            var value = this.value;
            if(links.length == 1 ){
                window.location.href = '?show=' + value;
            } else{
                var link_value = links[1].split("=")[1];
                if(link_value != value) {
                    window.location.href = '?show=' + value;
                }
            }
        }

        
        var imgs = document.getElementsByClassName('image')
        var open = document.getElementsByClassName('copy-btn-1')
        for (var i = 0; i < open.length; i++) {
            open[i].onclick = function () {
            var image = this.parentNode.getElementsByTagName('img')[0]
            var url = window.location.href + image.getAttribute('src')
            window.open(url)
          }
        }
        var btns = document.getElementsByClassName('copy-btn-2')
        for (var i = 0; i < btns.length; i++) {
          btns[i].onclick = function () {
            var image = this.parentNode.getElementsByTagName('img')[0]
            var url = window.location.href + image.getAttribute('src')
            var input = document.createElement('input')
            input.setAttribute('readonly', 'readonly')
            input.setAttribute('value', url)
            document.body.appendChild(input)
            input.select()
            var res = document.execCommand('copy')
              ? '复制链接成功！'
              : '复制链接失败！'
            document.body.removeChild(input)
          }
        }
        var html = document.getElementsByClassName('copy-btn-3')
        for (var i = 0; i < html.length; i++) {
            html[i].onclick = function () {
            var image = this.parentNode.getElementsByTagName('img')[0]
            var url = window.location.href + image.getAttribute('src')
            var img = "<img src='" + url + "'/>";
            var input = document.createElement('input')
            input.setAttribute('readonly', 'readonly')
            input.setAttribute('value', img)
            document.body.appendChild(input)
            input.select()
            var res = document.execCommand('copy')
              ? '复制链接成功！'
              : '复制链接失败！'
            document.body.removeChild(input)
          }
        }
      }
    </script>
  </body>
</html>
